<div class="card-container">
  <nz-tabset nzType="card" nzCentered [nzSelectedIndex]="selectedIndex">
    <nz-tab [nzTitle]="'用户信息'">
      <nz-card nzTitle="编辑用户" [nzExtra]="extraTemplate">
        <nz-alert *ngIf="saveError" [nzType]="'error'" [nzMessage]="saveError" [nzShowIcon]="true" class="mb-lg" />
        <form nz-form [formGroup]="form" (ngSubmit)="submit()" se-container="1" labelWidth="180">
          <se label="账号" [error]="{ required: '请填写' }" optionalHelp="账号不支持修改" required>
            <nz-input-group nzPrefixIcon="user">
              <input
                nz-input
                placeholder="请输入账号名称"
                formControlName="username"
                [style.background-color]="btn == 'edit' ? '#f0f0f0' : 'white'"
                [readonly]="btn == 'edit'"
              />
            </nz-input-group>
          </se>
          <se
            label="密码"
            [error]="{ required: '请填写', pattern: '密码不能小于3位' }"
            optionalHelp="添加密码提交后立即生效，若为空则保留原密码"
            required
          >
            <nz-input-group nzPrefixIcon="lock">
              <input nz-input type="password" formControlName="password" placeholder="密码" />
            </nz-input-group>
          </se>
          <se label="用户名" error="用户名不能相同" required>
            <input nz-input placeholder="请输入用户名" formControlName="nickName" />
          </se>
          <se label="手机号" [error]="{ required: '请填写', pattern: '只能包含0-9之间的数字，长度限制在11位' }" required>
            <input nz-input placeholder="请输入手机号" formControlName="phone" />
          </se>
          <se label="邮箱" [error]="{}">
            <input nz-input type="email" placeholder="请输入邮箱地址" formControlName="email" />
          </se>
          <se label="员工工号" error="请输入员工工号">
            <input nz-input placeholder="请输入员工工号" formControlName="employeeId" />
          </se>
          <se label="锁定状态" optionalHelp="由于连续多次登录账号将被锁定，可手工解锁">
            <nz-radio-group formControlName="accountNonLocked" name="accountNonLocked">
              <label nz-radio [nzValue]="false">锁定</label>
              <label nz-radio [nzValue]="true">正常</label>
            </nz-radio-group>
            <!-- <nz-switch formControlName="accountNonLocked" name="accountNonLocked"></nz-switch> -->
          </se>
          <se label="启用状态">
            <nz-radio-group formControlName="disabled" name="disabled">
              <label nz-radio [nzValue]="false">启用</label>
              <label nz-radio [nzValue]="true">禁用</label>
            </nz-radio-group>
            <!-- <nz-switch formControlName="disabled" name="disabled"></nz-switch> -->
          </se>
          <se>
            <button nz-button nzType="primary" [disabled]="form.invalid" type="submit" [nzLoading]="submitting">提交</button>
          </se>
        </form>
      </nz-card>
    </nz-tab>
    <nz-tab nzTitle="分配角色">
      <nz-card [nzTitle]="treeTitle" [nzExtra]="extraTemplate">
        <div style="margin-left: 10%; text-align: center">
          <nz-transfer
            [nzListStyle]="{ 'width.px': 300, 'height.px': 300 }"
            [nzDataSource]="translist"
            [nzTitles]="['可选角色', '已选角色']"
          />
          <button style="margin-top: 20px" nz-button nzType="primary" (click)="grantRole()">提交</button>
        </div>
      </nz-card>
    </nz-tab>
    <nz-tab nzTitle="配置数据权限">
      <nz-card [nzTitle]="'为用户配置数据权限'" [nzExtra]="extraTemplate">
        <nz-list style="margin-left: 10%; margin-right: 10%" nzItemLayout="horizontal">
          <nz-list-item>
            <ul nz-list-item-actions>
              <nz-list-item-action>
                <nz-switch
                  [(ngModel)]="phoneDecrypted"
                  nzCheckedChildren="开"
                  nzUnCheckedChildren="关"
                  (ngModelChange)="savePhoneDecrypted()"
                />
              </nz-list-item-action>
            </ul>
            <nz-list-item-meta nzTitle="允许查看手机号" nzDescription="在excel导出人群包时，可以明文显示，否则已密文的方式显示" />
          </nz-list-item>
        </nz-list>
      </nz-card>
    </nz-tab>
  </nz-tabset>
  <ng-template #extraTemplate>
    <button nz-button nzType="default" (click)="back()">返回</button>
  </ng-template>
</div>
